<template>
  <div class="list-header border-bottom">
    <div class="content">
      <slot>
        <span>{{selectedButton}}</span><span>总计：</span>
        <span :class="dataType == '收入' ? 'red' : 'green'">{{amount}}</span>
      </slot>
    </div>
    <div>
      <dropdown-picker-dark @click="slideUp">
        <template v-slot:title>
          {{selectedButton}}
        </template>
        <template v-slot:icon>
          <div>
            <span class="icon">
              <i class="iconfont iconty_zhankai"></i>
            </span>
          </div>
        </template>
      </dropdown-picker-dark>
      <slide-up-buttons 
        class="slide-up-adjust"
        :show="showSlideUp"
        :listData="dataList"
        :activeReportIndex="activeButtonIndex"
        @click="updateSelectedButton"
        @hide="foldSlideUp"
        >
      </slide-up-buttons> 
    </div>
  </div>
</template> 

<script>
import DropdownPickerDark from '@/components/base/dropdown-picker/dropdown-picker-dark'
import BcModal from '@/components/base/bc-modal/bc-modal'
import SlideUpButtons from '@/components/slide-up-buttons/slide-up-buttons'
export default {
  components: {
    DropdownPickerDark,
    BcModal,
    SlideUpButtons
  },
  props: {
    dataList: {
      type: Array,
      default: function() {
        return [
          {
            id: 1, 
            name: '全部'
          },
          {
            id: 2, 
            name: '个人充值'
          },
          {
            id: 3, 
            name: '购彩奖金'
          },
          {
            id: 4, 
            name: '彩票返点',

          },
          {
            id: 5, 
            name: '头牛奖金'
          },
          {
            id: 6, 
            name: '未中奖退本金'
          },
          {
            id: 7, 
            name: '代理分红'
          },
          {
            id: 8, 
            name: '日工资'
          },
          {
            id: 9, 
            name: '系统充值'
          },
          {
            id: 10, 
            name: '个人撤单'
          },
          {
            id: 11, 
            name: '系统撤单'
          },
          {
            id: 12, 
            name: 'AG奖金'
          },
          {
            id: 13, 
            name: '拒绝提款'
          },
          {
            id: 14, 
            name: '资金转换'
          },
        ]
      }
    },
    selectedButton: {
      type: String,
      default: '全部'
    },
    amount: {
      type: Number,
      default: 0
    },
    dataType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showSlideUp: false,
      activeButtonIndex: 0,
    }
  },
  methods: {
    slideUp() {
      this.showSlideUp = true
    },
    foldSlideUp() {
      this.showSlideUp = false 
    },
    updateSelectedButton(index) {
      this.activeButtonIndex = index 
      this.showSlideUp = false
      this.$emit('click', index)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .list-header 
    display flex 
    align-items center
    justify-content space-between
    box-sizing border-box 
    padding 0 10px
    height 40px
    .red 
      color $color-theme-red 
    .green 
      color $color-primary-green
  .slide-up-adjust >>> .contents 
    &:after 
      content: ''
      flex: auto
    .content 
      &:last-child 
        margin-left 10px

</style>

